<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
  <title>招聘会列表 - 职场社交</title>
  <!-- Bootstrap 5 CSS -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
  <!-- Font Awesome -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css">
  
  <style>
    body {
      background-color: #f8f9fa;
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      padding-bottom: 70px;
    }
    
    /* 顶部导航 */
    .top-nav {
      background-color: white;
      padding: 12px 15px;
      box-shadow: 0 2px 5px rgba(0,0,0,0.05);
      position: sticky;
      top: 0;
      z-index: 100;
    }
    
    .nav-title {
      font-size: 18px;
      font-weight: 600;
      text-align: center;
      margin: 0;
    }
    
    /* 搜索栏 */
    .search-container {
      padding: 12px 15px;
      background-color: white;
    }
    
    .search-box {
      position: relative;
    }
    
    .search-input {
      width: 100%;
      padding: 10px 15px 10px 40px;
      border-radius: 8px;
      border: 1px solid #eee;
      font-size: 14px;
      background-color: #f5f5f5;
    }
    
    .search-icon {
      position: absolute;
      left: 15px;
      top: 50%;
      transform: translateY(-50%);
      color: #999;
    }
    
    /* 筛选栏 */
    .filter-bar {
      display: flex;
      padding: 8px 15px;
      background-color: white;
      border-top: 1px solid #eee;
      overflow-x: auto;
      gap: 10px;
    }
    
    .filter-item {
      white-space: nowrap;
      padding: 6px 12px;
      border-radius: 20px;
      font-size: 14px;
      background-color: #f5f5f5;
      color: #666;
      border: none;
    }
    
    .filter-item.active {
      background-color: #0d6efd;
      color: white;
    }
    
    /* 招聘会列表 */
    .event-list {
      padding: 10px 15px 0;
    }
    
    .event-item {
      background-color: white;
      border-radius: 12px;
      overflow: hidden;
      margin-bottom: 12px;
      box-shadow: 0 1px 3px rgba(0,0,0,0.05);
    }
    
    /* 多图样式 */
    .event-images {
      display: flex;
      height: 120px;
    }
    
    .event-image {
      flex: 1;
      height: 100%;
      position: relative;
    }
    
    .event-image img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
    
    .image-count {
      position: absolute;
      right: 8px;
      bottom: 8px;
      background-color: rgba(0,0,0,0.5);
      color: white;
      font-size: 12px;
      padding: 2px 6px;
      border-radius: 10px;
    }
    
    /* 无图样式 */
    .no-image {
      height: 80px;
      background-color: #f5f5f5;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #999;
    }
    
    /* 活动信息 */
    .event-info {
      padding: 15px;
    }
    
    .event-title {
      font-size: 17px;
      font-weight: 600;
      color: #333;
      margin-bottom: 8px;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
    }
    
    .event-meta {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      font-size: 13px;
      color: #666;
      margin-bottom: 10px;
    }
    
    .meta-item {
      display: flex;
      align-items: center;
      gap: 4px;
    }
    
    .event-tag {
      display: inline-block;
      padding: 3px 8px;
      background-color: #f0f7ff;
      color: #0d6efd;
      border-radius: 4px;
      font-size: 12px;
      margin-right: 5px;
      margin-bottom: 5px;
    }
    
    .event-desc {
      font-size: 14px;
      color: #555;
      margin-top: 8px;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
      line-height: 1.5;
    }
    
    /* 活动底部操作区 */
    .event-actions {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 10px 15px;
      border-top: 1px solid #eee;
      font-size: 14px;
    }
    
    .participants {
      display: flex;
      align-items: center;
      gap: 5px;
      color: #666;
    }
    
    .participant-avatars {
      display: flex;
    }
    
    .participant-avatar {
      width: 24px;
      height: 24px;
      border-radius: 50%;
      object-fit: cover;
      border: 2px solid white;
      margin-left: -8px;
    }
    
    .participant-avatar:first-child {
      margin-left: 0;
    }
    
    .action-buttons {
      display: flex;
      gap: 10px;
    }
    
    .action-btn {
      padding: 5px 12px;
      border-radius: 20px;
      font-size: 13px;
      display: flex;
      align-items: center;
      gap: 5px;
    }
    
    /* 底部导航 */
    .bottom-nav {
      position: fixed;
      bottom: 0;
      left: 0;
      right: 0;
      background-color: white;
      border-top: 1px solid #eee;
      display: flex;
      padding: 8px 0;
      z-index: 100;
    }
    
    .nav-item {
      flex: 1;
      display: flex;
      flex-direction: column;
      align-items: center;
      color: #999;
      font-size: 10px;
      text-decoration: none;
    }
    
    .nav-item.active {
      color: #0d6efd;
    }
    
    .nav-icon {
      font-size: 20px;
      margin-bottom: 3px;
    }
    
    /* 加载更多 */
    .load-more {
      text-align: center;
      padding: 15px;
    }
    
    .load-more-btn {
      padding: 8px 20px;
      border-radius: 20px;
      font-size: 14px;
      background-color: white;
      border: 1px solid #eee;
      color: #666;
    }
    
    /* 空状态 */
    .empty-state {
      padding: 50px 20px;
      text-align: center;
      color: #999;
    }
    
    .empty-icon {
      font-size: 50px;
      margin-bottom: 15px;
      opacity: 0.5;
    }
    
    /* 日期标题 */
    .date-section {
      padding: 15px 15px 5px;
      font-size: 14px;
      color: #666;
      font-weight: 500;
    }
  </style>
</head>
<body>
  <!-- 顶部导航 -->
  <div class="top-nav d-flex justify-content-between align-items-center">
    <button class="btn btn-link p-0 text-dark">
      <i class="fa fa-arrow-left"></i>
    </button>
    <h1 class="nav-title">招聘会活动</h1>
    <button class="btn btn-link p-0 text-dark">
      <i class="fa fa-filter"></i>
    </button>
  </div>
  
  <!-- 搜索栏 -->
  <div class="search-container">
    <div class="search-box">
      <i class="fa fa-search search-icon"></i>
      <input type="text" class="search-input" placeholder="搜索招聘会、企业或职位">
    </div>
  </div>
  
  <!-- 筛选栏 -->
  <div class="filter-bar">
    <button class="filter-item active">全部活动</button>
    <button class="filter-item">线下招聘会</button>
    <button class="filter-item">线上宣讲会</button>
    <button class="filter-item">校园招聘</button>
    <button class="filter-item">社会招聘</button>
    <button class="filter-item">应届生专场</button>
  </div>
  
  <!-- 今日招聘会 -->
  <div class="date-section">今日</div>
  <div class="event-list">
    <!-- 多图样式招聘会 -->
    <div class="event-item">
      <div class="event-images">
        <div class="event-image">
          <img src="https://picsum.photos/300/200?random=1" alt="招聘会现场">
        </div>
        <div class="event-image">
          <img src="https://picsum.photos/300/200?random=2" alt="招聘会展位">
        </div>
        <div class="event-image">
          <img src="https://picsum.photos/300/200?random=3" alt="招聘会人流">
          <div class="image-count">+5</div>
        </div>
      </div>
      <div class="event-info">
        <h3 class="event-title">2023年秋季大型综合人才招聘会</h3>
        <div class="event-meta">
          <div class="meta-item"><i class="fa fa-map-marker"></i> 国际会展中心</div>
          <div class="meta-item"><i class="fa fa-calendar"></i> 今天 09:00-16:00</div>
          <div class="meta-item"><i class="fa fa-building-o"></i> 200+企业</div>
        </div>
        <div>
          <span class="event-tag">综合招聘</span>
          <span class="event-tag">全职</span>
          <span class="event-tag">应届生</span>
        </div>
        <p class="event-desc">
          本场招聘会涵盖互联网、金融、教育、医疗等多个行业，200+企业现场招聘，提供10000+就业岗位，求职者免费入场。
        </p>
      </div>
      <div class="event-actions">
        <div class="participants">
          <div class="participant-avatars">
            <img src="https://picsum.photos/100/100?random=10" class="participant-avatar" alt="参与者">
            <img src="https://picsum.photos/100/100?random=11" class="participant-avatar" alt="参与者">
            <img src="https://picsum.photos/100/100?random=12" class="participant-avatar" alt="参与者">
          </div>
          <span>1243人已报名</span>
        </div>
        <div class="action-buttons">
          <button class="btn btn-outline-primary action-btn">
            <i class="fa fa-calendar-plus-o"></i> 报名
          </button>
        </div>
      </div>
    </div>
    
    <!-- 单图样式招聘会 -->
    <div class="event-item">
      <div class="event-images">
        <div class="event-image" style="flex: 100%">
          <img src="https://picsum.photos/600/200?random=4" alt="互联网招聘会">
        </div>
      </div>
      <div class="event-info">
        <h3 class="event-title">2023互联网行业专场招聘会</h3>
        <div class="event-meta">
          <div class="meta-item"><i class="fa fa-map-marker"></i> 科技园区会议中心</div>
          <div class="meta-item"><i class="fa fa-calendar"></i> 今天 10:00-15:00</div>
          <div class="meta-item"><i class="fa fa-building-o"></i> 86家企业</div>
        </div>
        <div>
          <span class="event-tag">互联网</span>
          <span class="event-tag">技术岗</span>
          <span class="event-tag">高薪</span>
        </div>
        <p class="event-desc">
          汇聚行业头部企业，专注互联网技术、产品、运营等岗位招聘，现场可与企业技术负责人直接沟通。
        </p>
      </div>
      <div class="event-actions">
        <div class="participants">
          <div class="participant-avatars">
            <img src="https://picsum.photos/100/100?random=13" class="participant-avatar" alt="参与者">
            <img src="https://picsum.photos/100/100?random=14" class="participant-avatar" alt="参与者">
          </div>
          <span>586人已报名</span>
        </div>
        <div class="action-buttons">
          <button class="btn btn-outline-primary action-btn">
            <i class="fa fa-calendar-plus-o"></i> 报名
          </button>
        </div>
      </div>
    </div>
    
    <!-- 无图样式招聘会 -->
    <div class="event-item">
      <div class="no-image">
        <i class="fa fa-briefcase fa-2x"></i>
      </div>
      <div class="event-info">
        <h3 class="event-title">2023届高校毕业生线上双选会</h3>
        <div class="event-meta">
          <div class="meta-item"><i class="fa fa-laptop"></i> 线上直播</div>
          <div class="meta-item"><i class="fa fa-calendar"></i> 今天 09:00-21:00</div>
          <div class="meta-item"><i class="fa fa-building-o"></i> 152家企业</div>
        </div>
        <div>
          <span class="event-tag">线上</span>
          <span class="event-tag">应届生</span>
          <span class="event-tag">全国</span>
        </div>
        <p class="event-desc">
          面向2023届高校毕业生的线上双选会，提供视频面试、在线沟通等功能，足不出户即可与企业HR面对面交流。
        </p>
      </div>
      <div class="event-actions">
        <div class="participants">
          <div class="participant-avatars">
            <img src="https://picsum.photos/100/100?random=15" class="participant-avatar" alt="参与者">
            <img src="https://picsum.photos/100/100?random=16" class="participant-avatar" alt="参与者">
            <img src="https://picsum.photos/100/100?random=17" class="participant-avatar" alt="参与者">
            <img src="https://picsum.photos/100/100?random=18" class="participant-avatar" alt="参与者">
          </div>
          <span>2157人已报名</span>
        </div>
        <div class="action-buttons">
          <button class="btn btn-primary action-btn">
            <i class="fa fa-check"></i> 已报名
          </button>
        </div>
      </div>
    </div>
  </div>
  
  <!-- 明日招聘会 -->
  <div class="date-section">明日</div>
  <div class="event-list">
    <!-- 多图样式招聘会 -->
    <div class="event-item">
      <div class="event-images">
        <div class="event-image">
          <img src="https://picsum.photos/300/200?random=5" alt="金融招聘会">
        </div>
        <div class="event-image">
          <img src="https://picsum.photos/300/200?random=6" alt="金融展位">
        </div>
      </div>
      <div class="event-info">
        <h3 class="event-title">2023金融行业人才专场招聘会</h3>
        <div class="event-meta">
          <div class="meta-item"><i class="fa fa-map-marker"></i> 国际金融中心</div>
          <div class="meta-item"><i class="fa fa-calendar"></i> 明天 09:30-15:30</div>
          <div class="meta-item"><i class="fa fa-building-o"></i> 56家企业</div>
        </div>
        <div>
          <span class="event-tag">金融</span>
          <span class="event-tag">全职</span>
          <span class="event-tag">高薪</span>
        </div>
        <p class="event-desc">
          银行、证券、保险等金融机构齐聚，招聘风控、投行、理财等岗位，部分岗位年薪30万起。
        </p>
      </div>
      <div class="event-actions">
        <div class="participants">
          <div class="participant-avatars">
            <img src="https://picsum.photos/100/100?random=19" class="participant-avatar" alt="参与者">
          </div>
          <span>328人已报名</span>
        </div>
        <div class="action-buttons">
          <button class="btn btn-outline-primary action-btn">
            <i class="fa fa-calendar-plus-o"></i> 报名
          </button>
        </div>
      </div>
    </div>
    
    <!-- 无图样式招聘会 -->
    <div class="event-item">
      <div class="no-image">
        <i class="fa fa-graduation-cap fa-2x"></i>
      </div>
      <div class="event-info">
        <h3 class="event-title">高校毕业生基层就业专场招聘会</h3>
        <div class="event-meta">
          <div class="meta-item"><i class="fa fa-map-marker"></i> 人才市场中心</div>
          <div class="meta-item"><i class="fa fa-calendar"></i> 明天 10:00-14:00</div>
          <div class="meta-item"><i class="fa fa-building-o"></i> 32家单位</div>
        </div>
        <div>
          <span class="event-tag">基层就业</span>
          <span class="event-tag">应届生</span>
          <span class="event-tag">事业单位</span>
        </div>
        <p class="event-desc">
          针对高校毕业生的基层就业专场，包含社区服务、教育医疗等基层岗位，提供政策咨询服务。
        </p>
      </div>
      <div class="event-actions">
        <div class="participants">
          <div class="participant-avatars">
            <img src="https://picsum.photos/100/100?random=20" class="participant-avatar" alt="参与者">
            <img src="https://picsum.photos/100/100?random=21" class="participant-avatar" alt="参与者">
          </div>
          <span>156人已报名</span>
        </div>
        <div class="action-buttons">
          <button class="btn btn-outline-primary action-btn">
            <i class="fa fa-calendar-plus-o"></i> 报名
          </button>
        </div>
      </div>
    </div>
  </div>
  
  <!-- 本周招聘会 -->
  <div class="date-section">本周</div>
  <div class="event-list">
    <!-- 多图样式招聘会 -->
    <div class="event-item">
      <div class="event-images">
        <div class="event-image">
          <img src="https://picsum.photos/300/200?random=7" alt="创意产业">
        </div>
        <div class="event-image">
          <img src="https://picsum.photos/300/200?random=8" alt="设计工作坊">
        </div>
        <div class="event-image">
          <img src="https://picsum.photos/300/200?random=9" alt="创意展示">
        </div>
      </div>
      <div class="event-info">
        <h3 class="event-title">2023创意设计与文化产业招聘会</h3>
        <div class="event-meta">
          <div class="meta-item"><i class="fa fa-map-marker"></i> 文化创意园区</div>
          <div class="meta-item"><i class="fa fa-calendar"></i> 周六 10:00-17:00</div>
          <div class="meta-item"><i class="fa fa-building-o"></i> 48家企业</div>
        </div>
        <div>
          <span class="event-tag">创意设计</span>
          <span class="event-tag">文化产业</span>
          <span class="event-tag">兼职</span>
        </div>
        <p class="event-desc">
          面向设计师、策划师、文化创意人才的专场招聘会，现场设有作品展示区和创意工作坊。
        </p>
      </div>
      <div class="event-actions">
        <div class="participants">
          <div class="participant-avatars">
            <img src="https://picsum.photos/100/100?random=22" class="participant-avatar" alt="参与者">
            <img src="https://picsum.photos/100/100?random=23" class="participant-avatar" alt="参与者">
            <img src="https://picsum.photos/100/100?random=24" class="participant-avatar" alt="参与者">
          </div>
          <span>217人已报名</span>
        </div>
        <div class="action-buttons">
          <button class="btn btn-outline-primary action-btn">
            <i class="fa fa-calendar-plus-o"></i> 报名
          </button>
        </div>
      </div>
    </div>
  </div>
  
  <!-- 加载更多 -->
  <div class="load-more">
    <button class="load-more-btn">
      <i class="fa fa-refresh"></i> 加载更多
    </button>
  </div>
  
  <!-- 底部导航 -->
  <div class="bottom-nav">
    <a href="#" class="nav-item">
      <i class="fa fa-home nav-icon"></i>
      <span>首页</span>
    </a>
    <a href="#" class="nav-item active">
      <i class="fa fa-calendar nav-icon"></i>
      <span>招聘会</span>
    </a>
    <a href="#" class="nav-item">
      <i class="fa fa-briefcase nav-icon"></i>
      <span>职位</span>
    </a>
    <a href="#" class="nav-item">
      <i class="fa fa-user-o nav-icon"></i>
      <span>我的</span>
    </a>
  </div>

  <!-- Bootstrap JS -->
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
  
  <script>
    // 筛选按钮切换
    const filterItems = document.querySelectorAll('.filter-item');
    filterItems.forEach(item => {
      item.addEventListener('click', function() {
        filterItems.forEach(i => i.classList.remove('active'));
        this.classList.add('active');
        // 实际应用中这里会触发筛选逻辑
      });
    });
    
    // 报名按钮功能
    const registerButtons = document.querySelectorAll('.action-btn');
    registerButtons.forEach(button => {
      button.addEventListener('click', function() {
        if (this.innerHTML.includes('报名')) {
          this.classList.remove('btn-outline-primary');
          this.classList.add('btn-primary');
          this.innerHTML = '<i class="fa fa-check"></i> 已报名';
          
          // 更新参与人数
          const participantsEl = this.closest('.event-actions').querySelector('.participants span');
          const currentCount = parseInt(participantsEl.textContent);
          participantsEl.textContent = `${currentCount + 1}人已报名`;
          
          // 添加头像到参与者列表
          const avatarsContainer = this.closest('.event-actions').querySelector('.participant-avatars');
          const newAvatar = document.createElement('img');
          newAvatar.src = `https://picsum.photos/100/100?random=${Math.floor(Math.random() * 100)}`;
          newAvatar.className = 'participant-avatar';
          newAvatar.alt = '参与者';
          avatarsContainer.appendChild(newAvatar);
          
          alert('报名成功！');
        } else {
          this.classList.remove('btn-primary');
          this.classList.add('btn-outline-primary');
          this.innerHTML = '<i class="fa fa-calendar-plus-o"></i> 报名';
          
          // 更新参与人数
          const participantsEl = this.closest('.event-actions').querySelector('.participants span');
          const currentCount = parseInt(participantsEl.textContent);
          participantsEl.textContent = `${currentCount - 1}人已报名`;
          
          // 移除最后一个头像
          const avatarsContainer = this.closest('.event-actions').querySelector('.participant-avatars');
          if (avatarsContainer.children.length > 0) {
            avatarsContainer.removeChild(avatarsContainer.lastChild);
          }
          
          alert('已取消报名');
        }
      });
    });
    
    // 加载更多功能
    document.querySelector('.load-more-btn').addEventListener('click', function() {
      const btn = this;
      btn.innerHTML = '<i class="fa fa-spinner fa-spin"></i> 加载中...';
      
      // 模拟加载延迟
      setTimeout(() => {
        btn.innerHTML = '<i class="fa fa-refresh"></i> 加载更多';
        alert('已加载全部内容');
      }, 1500);
    });
    
    // 搜索功能
    const searchInput = document.querySelector('.search-input');
    searchInput.addEventListener('keydown', function(e) {
      if (e.key === 'Enter') {
        e.preventDefault();
        const searchText = this.value.trim();
        if (searchText) {
          alert(`搜索: ${searchText}`);
        }
      }
    });
  </script>
</body>
</html>
